<template>
  <view class="post-report-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        举报
      </view>
    </navigation-bar>
    <view class="main-content-wrapper">
      <view class="report-title">
        帖子内容举报
      </view>
      <view class="form-wrap">
        <form name="postReportForm">
          <!-- 举报内容 -->
          <view class="content_item-box">
            <view class="left-title">
              举报内容
            </view>
            <view class="right-input">
              <input type="text" class="inner-input" placeholder="帖子标题" placeholder-style="color: #00000080;"
                :adjust-position="false" :hold-keyboard="true">
            </view>
          </view>
          <!-- 举报原因 -->
          <view class="reason_item-box">
            <view class="left-title">
              举报原因
            </view>
            <view class="right-input" @click="isShowPopup = true">
              <view style="display: flex;justify-content: space-between;align-items: center;">
                <view class="reaport-reason">
                  {{selectedReportReason}}
                </view>
                <view class="select-reason-btn iconfont" style="font-size: 40rpx;">

                  &#xe624;
                </view>
              </view>
            </view>
          </view>
          <!-- 举报描述 -->
          <view class="description_item-box">
            <view style="line-height: 1;" class="left-title">
              举报描述
            </view>
            <view class="right-input">
              <textarea class="description-textarea" placeholder="根据您的需求选择填写相关描述"
                placeholder-style="font-size: 28rpx;color: #00000080;" :auto-height="true" :hold-keyboard="false"
                :show-confirm-bar="false"></textarea>
            </view>
          </view>
          <!-- 添加照片 -->
          <view style="margin-top: 60rpx;" class="addpic_item-box">
            <view class="left-title">
              添加照片
            </view>
            <view class="sub-pic-box">
              <view class="pic-item" v-for="item in imgsList" :key="item">
                <image class="inner-img" :src="item" mode="aspectFill"></image>
              </view>
              <view v-if="imgsList.length < 6" class="add-pic-aria pic-item" @click="onUploadPictureFile">
                +
              </view>
            </view>
          </view>
        </form>
      </view>
      <view class="attention" style="width: 100%;font-size: 20rpx;margin-top: 30rpx;">
        注意：<br>
        为了维护良好的社交环境，我们鼓励圈子用户对违反法律、触及道德、违反Campus circle使用协议等相关规定以及标准的帖子以及用户进行举报，在收到用户的举报之后我们会认真处理该帖及其发布者，同时对举报者的举报深表感谢！
        为了保证每一个圈子用户的相关权益，我们会公正处理用户被举报的情况，在审核过程中如果出现用户被恶意举报的问题，我们将会严肃追究恶意举报者的问题，对其按照相关处理办法进行处理！
      </view>
    </view>
    <!-- 底部提交按钮 -->
    <view class="bottom-submit-btn">
      提交
    </view>
    <cc-popup :show="isShowPopup" :constant="true" @click-model="isShowPopup = false">
      <view class="popup-report-reason-wrap">
        <scroll-view :scroll-y="true" class="report-reason-list">
          <view class="report-reason-item" hover-class="touch-hover" v-for="item in reportReason" :key="item"
            @click="onSelectReportReason(item)">
            {{item}}
          </view>
        </scroll-view>
        <view class="report-reason-cancle" hover-class="touch-hover" :hover-start-time="0" :hover-stay-time="250"
          @click="isShowPopup = false">
          取消
        </view>
      </view>
    </cc-popup>
  </view>
</template>

<script>
  import ccPopup from "@/components/cc-popup/cc-popup.vue"
  export default {
    data() {
      return {
        imgsList: [],
        isShowPopup: false,
        reportReason: ['某某某某某某', '某某某某某某', '某某某某某某', '某某某某某某', '某某某某某某', '某某某某某某', '某某某某某某', '某某某某某某', '某某某某某某'],
        selectedReportReason: ''
      };
    },
    methods: {
      // 上传图片
      onUploadPictureFile: function() {
        uni.chooseMedia({
          count: 6 - this.imgsList.length,
          mediaType: ['image'],
          success: res => {
            const selectImageList = res.tempFiles.map(imageItem => imageItem.tempFilePath)
            this.imgsList = [...this.imgsList, ...selectImageList]
          }
        })
      },
      // 选择举报原因
      onSelectReportReason: function(reason) {
        this.isShowPopup = false
        this.selectedReportReason = reason
      }
    },
    components: {
      ccPopup
    }
  }
</script>

<style lang="scss">
  .post-report-container {
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 240rpx;

    .main-content-wrapper {
      padding: 20rpx 40rpx 0;

      .report-title {
        font-size: 36rpx;
      }

      .form-wrap {

        .content_item-box,
        .reason_item-box {
          display: flex;
          margin-top: 60rpx;
          justify-content: space-between;
          align-items: center;
        }

        .left-title {
          width: 28%;
          font-size: 32rpx;
        }

        .right-input {
          width: 72%;
          font-size: 28rpx;
        }

        .description_item-box {
          display: flex;
          margin-top: 60rpx;

          .description-textarea {
            width: 100%;
            height: 100%;
            min-height: 35rpx;
            font-size: 28rpx;
          }
        }

        .sub-pic-box {
          margin-top: 40rpx;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 100%;
          height: 330rpx;

          .pic-item {
            width: 330rpx;
            height: 100%;
            border-radius: 26rpx;
            overflow: hidden;
            margin-bottom: 20rpx;

            .inner-img {
              width: 100%;
              height: 100%;
            }
          }

          .add-pic-aria {
            background-color: #F3F3F3;
            line-height: 330rpx;
            text-align: center;
            font-size: 80rpx;
          }
        }

      }
    }

    .bottom-submit-btn {
      position: fixed;
      bottom: 120rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 660rpx;
      height: 80rpx;
      background-color: #000;
      border-radius: 50rpx;
      color: #FFF;
      font-size: 40rpx;
      text-align: center;
      line-height: 80rpx;
      z-index: 99;
    }

    .popup-report-reason-wrap {
      background-color: #FFF;
      padding-top: 60rpx;
      padding-bottom: 20rpx;
      border-top-left-radius: 26rpx;
      border-top-right-radius: 26rpx;

      .report-reason-list {
        max-height: 70vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .report-reason-item {
          width: 100%;
          text-align: center;
          font-size: 28rpx;
          padding: 30rpx 0;
        }
      }

      .report-reason-cancle {
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        margin: 20rpx 0;
        font-size: 36rpx;
      }

      .touch-hover {
        background-color: #F3F3F3;
      }
    }
  }
</style>